<template>
	<view class="pop-menu-container">
		<!-- 悬浮菜单主体：支持自定义位置 -->
		<view
			class="pop-menu"
			v-if="showMenu"
			:style="[
				getMenuPositionStyle(), // 动态位置样式
				{
					width: menuWidth,
					backgroundColor: menuBgColor,
					borderRadius: menuRadius
				}
			]"
			@click.stop
		>
			<!-- 菜单列表：通过 slot 自定义内容，默认渲染 props 传入的菜单 -->
			<slot name="menu-item">
				<view
					class="menu-item"
					v-for="(item, index) in menuList"
					:key="index"
					:style="{ color: itemColor, padding: itemPadding }"
					@click="handleMenuItemClick(item, index)"
				>
					{{ item.label }}
				</view>
			</slot>

			<!-- 三角指示器：动态跟随菜单位置 -->
			<view
				class="menu-triangle"
				:style="[
					getTrianglePositionStyle(), // 动态三角位置
					{ borderBottomColor: menuBgColor } // 三角颜色与菜单一致
				]"
			></view>
		</view>

		<!-- 遮罩层：点击关闭菜单 -->
		<view class="menu-mask" v-if="showMenu" @click="closeMenu" :style="{ zIndex: maskZIndex }"></view>
	</view>
</template>

<script>
export default {
	name: 'popMenu',
	props: {
		// 基础控制
		showMenu: {
			// 控制菜单显示/隐藏（由父组件传入）
			type: Boolean,
			default: false
		},
		// 菜单内容配置（默认菜单用，slot 优先级更高）
		menuList: {
			// 菜单列表：[{ label: '菜单文本', value: '菜单标识' }]
			type: Array,
			default: () => [
				{ label: '默认选项1', value: 'option1' },
				{ label: '默认选项2', value: 'option2' }
			]
		},
		// 样式配置（支持自定义）
		menuPosition: {
			// 菜单位置：top/right/bottom/left（基于触发元素）
			type: String,
			default: 'bottom', // 默认在触发元素下方
			validator: (val) => ['top', 'right', 'bottom', 'left'].includes(val)
		},
		menuWidth: {
			// 菜单宽度（支持 rpx/px）
			type: String,
			default: '250rpx'
		},
		menuBgColor: {
			// 菜单背景色
			type: String,
			default: '#4f4f4f'
		},
		menuRadius: {
			// 菜单圆角
			type: String,
			default: '20rpx'
		},
		itemColor: {
			// 菜单项文字颜色
			type: String,
			default: '#fff'
		},
		itemPadding: {
			// 菜单项内边距
			type: String,
			default: '15rpx 20rpx'
		},
		// 层级配置
		menuZIndex: {
			// 菜单层级
			type: Number,
			default: 999
		},
		maskZIndex: {
			// 遮罩层层级
			type: Number,
			default: 100
		}
	},
	methods: {
		// 关闭菜单：通知父组件更新 showMenu 状态
		closeMenu() {
			this.$emit('update:showMenu', false);
		},
		// 菜单项点击：触发回调，传递菜单信息
		handleMenuItemClick(item, index) {
			this.$emit('menu-click', { item, index }); // 传递点击的菜单数据
			this.closeMenu(); // 点击后默认关闭菜单（可通过 props 控制是否关闭）
		},
		// 动态计算菜单位置样式（基于 menuPosition）
		getMenuPositionStyle() {
			const baseStyle = {
			    position: "absolute", // 基于父级触发按钮定位
			    boxShadow: "0 4rpx 12rpx rgba(0, 0, 0, 0.2)",
			    transition: "all 0.2s ease",
			    zIndex: this.menuZIndex,
			    padding: "15rpx",
			    right: "0" // 改为右对齐触发按钮，而非固定 10rpx
			};

			// 根据位置配置不同偏移
			switch (this.menuPosition) {
				case 'top':
					return { ...baseStyle, bottom: '130%', right: '10rpx' };
				case 'right':
					return { ...baseStyle, left: '130%', top: '50%', height: 'auto' };
				case 'left':
					return { ...baseStyle, right: '110%', top: '0', height: 'auto' };
				case 'bottom': // 默认下方
				default:
					 return { ...baseStyle, top: "100%", marginTop: "10rpx" };;
			}
		},
		// 动态计算三角位置（与菜单位置对应）
	getTrianglePositionStyle() {
	  const baseStyle = {
	    content: '',
	    position: 'absolute',
	    width: '0',
	    height: '0',
	    filter: 'drop-shadow(0 -2rpx 2rpx rgba(0, 0, 0, 0.1))'
	  };
	
	  switch (this.menuPosition) {
	    case 'top':
	      // 菜单在上方：三角向下，仅保留 border-top（实色），其他方向透明
	      return { 
	        ...baseStyle, 
	        bottom: '-16rpx', // 三角在菜单底部，向下超出
	        right: '30rpx', 
	        borderTop: `16rpx solid ${this.menuBgColor}`, // 实色边框（三角主体）
	        borderLeft: '16rpx solid transparent', // 透明边框（形成三角）
	        borderRight: '16rpx solid transparent',
	        borderBottom: 'none' // 清空下边框，避免干扰
	      };
	    case 'right':
	      // 菜单在右侧：三角向左，仅保留 border-right
	      return { 
	        ...baseStyle, 
	        left: '-16rpx', // 三角在菜单左侧，向左超出
	        top: '20rpx', 
	        borderRight: `16rpx solid ${this.menuBgColor}`,
	        borderTop: '16rpx solid transparent',
	        borderBottom: '16rpx solid transparent',
	        borderLeft: 'none'
	      };
	    case 'left':
	      // 菜单在左侧：三角向右，仅保留 border-left
	      return { 
	        ...baseStyle, 
	        right: '-16rpx', // 三角在菜单右侧，向右超出
	        top: '20rpx', 
	        borderLeft: `16rpx solid ${this.menuBgColor}`,
	        borderTop: '16rpx solid transparent',
	        borderBottom: '16rpx solid transparent',
	        borderRight: 'none'
	      };
	    case 'bottom': 
	    default:
	      // 菜单在下方：三角向上，仅保留 border-bottom（最常用场景）
	      return { 
	        ...baseStyle, 
	        top: '-16rpx', // 三角在菜单顶部，向上超出
	        right: '30rpx', 
	        borderBottom: `16rpx solid ${this.menuBgColor}`, // 实色边框（三角主体）
	        borderLeft: '16rpx solid transparent', // 透明边框（形成三角）
	        borderRight: '16rpx solid transparent',
	        borderTop: 'none' // 清空上边框，避免干扰
	      };
	  }
	}
	}
};
</script>

<style lang="scss" scoped>
/* 菜单主体基础样式 */
.pop-menu {
	position: relative;
	.menu-item {
		text-align: center;
		border-radius: 10rpx;
		transition: all 0.15s;
		margin-top: 10rpx;
		&:active {
			background-color: #2d2d2d;
			box-shadow: inset 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
			transform: scale(0.98);
		}
	}
}
.menu-triangle {
  margin: 0;
  padding: 0;
  border: none; /* 清空默认边框，避免干扰动态样式 */
}
/* 遮罩层样式 */
.menu-mask {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: transparent;
}
</style>
